<template>
<div class="wrapper">
	<div class="info-panel">
		<div class="info-title">微信头像</div>
		<image class="info-avatar" @click="getUserProfile" :src="userInfo.head_img || '/static/images/docpic.png' " />
	</div>
	
	<div class="info-panel">
		<div class="info-title">姓名</div>
		<input type='text' v-model="nickname" placeholder='请输入' class="info-input"/>
	</div>
	<div class="info-panel">
		<div class="info-title">所在医院</div>
		<input type='text' v-model="hospital_name" placeholder='请输入' class="info-input"/>
	</div>
	<!-- <div class="info-panel">
		<div class="info-title">科室</div>
		<input type='text' placeholder='请输入' class="info-input"/>
	</div>
	<div class="info-panel">
		<div class="info-title">擅长病种</div>
		<picker mode='selector' class="info-input" >
			<div class='picker'>
			</div>
		</picker>
	</div> -->
	<div class="info-panel">
		<div class="info-title">自我介绍</div>
		<Textarea v-model="self_info" placeholder='请输入' class="info-input info-area"/>
	</div>
	<div>
		<button class='btn-max-w' type='primary' @click="ev_save">保存</button>
	</div>
</div>
</template>

<script>
	import request from '../../utils/request'
	console.log("🚀 ~ request:")
	export default {
		data() {
			return {
				userInfo: {},
				hasUserInfo: false,
				nickname:'',
				hospital_name:'',
				self_info:'',
			}
		},
		async onLoad() {
			let userInfo = await uni.getStorageSync('userInfo')
			this.userInfo = userInfo
			console.log("🚀 ~ returnnewPromise ~ userInfo:", userInfo)


		},
		methods: {
			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log("🚀 ~ getUserProfile ~ res:", res)
						this.userInfo.head_img = res.userInfo.avatarUrl
						this.nickname = res.userInfo.nickName
					}
				})
			},
			save(){
				uni.reLaunch({
					url: '/pages/home/index'
				});
			},
			async ev_save(){
				const parames = {
					head_img:this.userInfo.head_img,
					nickname:this.nickname,
					hospital_name:this.hospital_name,
					self_info:this.self_info
				}
				const resData = await request('api/personal/userEdit', 'post', parames);
				uni.showToast({
					title: resData.msg,
					icon: 'success',
					mask: true
				})
				uni.reLaunch({
					url: '/pages/home/index'
				});
			},
			to_privacy(){
				uni.navigateTo({
					url: '../privacy/index' // 跳转到对应路径的 tabBar 页面
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
  display       : flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 15upx;
  padding-bottom: 50upx;
  .info-panel {
    border-bottom: 1upx solid #E9E9E9;
    padding: 40upx 0;
    margin: 0 10upx;
    .info-title  {
      font-size: 32upx;
      color: hsl(0, 0%, 0%);
      position: relative;
      padding-left: 20upx;
      &::before{
        content: '';
        position: absolute;
        width: 8upx;
        height: 30upx;
        background-color: #0094FF;
        border-radius: 4upx;
        left: 0;
        top: 8upx;
      }
    }
    .info-avatar {
      display: block;
      width  : 120upx;
      height : 120upx;
      margin-top: 20upx;
			border-radius: 50%;
    }
    .info-input {
      color: #0e0e0e;
      border: 1upx solid #66C2FF;
      display: block;
      height: 80upx;
      background-color: #F0F9FF;
      border-radius: 40upx;
      padding-left: 20upx;
      margin-top: 15upx;
    }
    .info-area {
      height: 200upx;
      width: calc(100% - 30upx);
      line-height: 1;
      padding-top: 20upx;
    }
    .picker {
      margin-top: 20upx;
      color: #7d7d7d;
    }
  }
  .btn-max-w {
    background-color: #0094FF;
    border-radius: 130upx;
    width: 600upx;
    margin-top: 80upx;
		color: #fff;
  }
}


</style>
